<template>
	<!-- 试卷列表页面 -->
	<view class="paperlist">
		<view class="title">导航</view>
		<view class="cate-list">
			<view v-for="(item,index) in cates" @click="chooseCateFn(item.name, index)" :key="item.id"
				:class="['opt',num == index ? 'active':'']">
				{{item.name}}
			</view>
		</view>
		<view class="title">试卷列表</view>
		<view class="list-box" v-if="true">
			<navigator v-for="item in papers" :key="item.id"
				:url="`/pages/paper/paper?_id=${item._id}&name=${item.name}`">
				<view class="item">
					<view class="tit" style="color: #000;">{{item.paper}}</view>
					<view style="color: #666;font-size: 28rpx; margin-top: 10rpx;">{{item.name}}</view>
				</view>
			</navigator>
		</view>
		<view class="message">暂无试卷列表~~</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				num: 0,
				cates: [],
				papers: [], //试卷列表数组
			}
		},
		methods: {
			async getCategoryFn() {
				let that = this;
				uni.showLoading({
					title: "正在加载.."
				})
				await uniCloud.callFunction({
						name: "category"
					})
					.then(
						resData => {
							// console.log(resData)
							if (resData.result && resData.result.data) {
								let data = resData.result.data;
								that.cates = data;
								if (data.length != 0) {
									// 默认选择第一个
									that.getPapersFn(data[0].name);
								}
							}
						}
					)
					.catch(err => console.log(err))

				uni.hideLoading();
			},
			// 处理试卷列表
			async getPapersFn(name) {
				let that = this;
				uniCloud.callFunction({
						name: "paper",
						data: {
							name: name
						}
					})
					.then(
						resData => {
							console.log(resData.result);
							if (resData.result && resData.result.data) {
								that.papers = resData.result.data;
							}
						}
					)
					.catch(err => console.log(err))
			},
			chooseCateFn(name, index) {
				this.num = index;
				if (name) {
					this.getPapersFn(name)
				}
			}
		},
		onLoad(options) {
			this.getCategoryFn();
		}
	}
</script>


<style lang="scss">
	@import "../../static/scss/variable.scss";

	.paperlist {
		padding: $padd;
	}

	.list-box {
		margin-top: 20rpx;

		.item {
			padding: 20rpx 10rpx;
			border-bottom: 1px solid #f0f0f0;
			font-size: 32rpx;
			color: #666;
		}
	}

	.cate-list {
		width: 100%;
		display: flex;
		flex-wrap: wrap;

		.opt {
			padding: 12rpx 40rpx;
			border: 1px solid #f0f0f0;
			margin-right: 20rpx;
			margin-top: 20rpx;
			font-size: 32rpx;
			flex-shrink: 0;

			&.active {
				background-color: $theme-color;
				color: #fff;
			}
		}


	}
</style>